<template>
  <div class="project-case">
    <section class="banner">
      <img src="@/assets/banner/home_pic_yj.png">
    </section>

    <section class="page">
      <Tabs v-model="pageIndex" class="tab-container" :animated="false">
        <TabPane v-for="(item, index) in cardData" :key="index" :label="item.title" :name="item.name">
          <z-card
            class="project-card"
            v-for="(itemCard, indexCard) in item.data"
            :key="indexCard"
            :imgUrl="itemCard.imgUrl"
            :title="itemCard.title"
            :subText="itemCard.subText"
            :detailText="itemCard.detailText"
            @jump="jumpTo"
          ></z-card>
          <Page 
            class="pagination"
            :page-size="18"
            :total="item.data.length" 
          />
        </TabPane>
      </Tabs>

      <Breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <BreadcrumbItem>您的位置：<a href="/index">首页</a></BreadcrumbItem>
        <BreadcrumbItem class="breadcrumb-item">项目案例</BreadcrumbItem>
      </Breadcrumb>
    </section>
  </div>
</template>

<script>
//卡片
import zCard from "@/components/zCard.vue"
export default {
  data () {
    return {
      pageIndex: 'all',
      cardData: [
        {
          title: '全部',
          name: 'all',
          data: [{
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '甜橙保险',
            subText: '微信公众号服务',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '浦发银行',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '苏浙汇',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '风电',
            subText: '物联网集成',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '蓝牙门禁',
            subText: '智能社区',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '智能水务',
            subText: '物联网集成',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '富山',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '航天',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '膝关节',
            subText: '移动端APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '医疗SaaS系统',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '共享车位',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '城开',
            subText: '移动端APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '上房',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '宝山公租房',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '众信金服',
            subText: '移动端APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '金山E法',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: 'Smart Survey',
            subText: '社交类APP开发',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }]
        }, 
        {
          title: '微信活动',
          name: 'wechat',
          data: [{
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }]
        }, 
        {
          title: '物联网集成',
          name: 'internet',
          data: [{
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }]
        }, 
        {
          title: '移动端开发',
          name: 'mobile',
          data: [{
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }]
        }, 
        {
          title: '系统定制开发',
          name: 'system',
          data: [{
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }, {
            imgUrl: `/imgs/home_pic_banner.png`,
            title: '移动微厅',
            subText: '定制化的H5活动',
            detailText: '经过600多天的精心维护，上海移动微厅的粉丝量 从80w增长至400w，线上业务办理也同比'
          }]
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    changePage(label) {
      return label
    },
    jumpTo(title, imgUrl) {
      this.$router.push(`/case-details?title=${title}&imgUrl=${imgUrl}`)
    }
  },
  components: {
    zCard
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.page {
  position: relative;
  width: 1200px;
  margin: 42px auto;
}
.breadcrumb {
  position: absolute;
  right: 20px;
  top: 8px;
}
.project-card {
  margin: 0 60px 60px 0;
  cursor: pointer;
}
.project-card:nth-of-type(3n+1) {
  margin: 0 60px 60px 0;
}
.project-card:nth-of-type(3n) {
  margin: 0 0 60px 0;
}
.pagination {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
